<template>
    <div class="menu-wrapper">
        <template v-for="item in sidebarList">
            <p class="sidebarItem-groupTitle" v-if="item.hasOwnProperty('groupTitle')" :key="item.groupTitle">
                {{ item.groupTitle }}</p>
            <s-submenu
                    :popper-append-to-body="false"
                    v-else-if="item.hasOwnProperty('group') && item.children.length" :index="item.group"
                    :key="item.group">
                <template slot="title">
                    <s-icon v-if="item.icon" :icon="item.icon"/>
                    <span v-if="item.title" slot="title">{{ item.title }}</span>
                </template>

                <template v-for="child in item.children">
                    <s-menu-item :index="child.path" :key="child.path">
                        <s-icon v-if="child.icon" :icon="child.icon"/>
                        <span v-if="child.title" slot="title">{{ child.title }}</span>
                    </s-menu-item>
                </template>
            </s-submenu>
            <s-menu-item v-else :index="item.path" :class="{'submenu-title-noDropdown':!isNest}" :key="item.path">
                <s-icon v-if="item.icon" :icon="item.icon"/>
                <i v-if="item.title === '操作日志'" class="el-icon-document-copy"></i>
                <i v-if="item.title === '处分统计'" class="el-icon-s-data"></i>
                <i v-if="item.title === '违纪设置'" class="el-icon-s-tools"></i>
                <i v-if="item.title === '用户管理'" class="el-icon-user-solid"></i>
                <i v-if="item.title === '违纪处分'" class="el-icon-upload2"></i>
                <span v-if="item.title" slot="title">{{ item.title }}</span>
            </s-menu-item>
        </template>
    </div>
</template>

<script>
import {MenuItem, Submenu} from 'element-ui'
import Icon from '@/components/Icon'

export default {
  name: 'sidebar-item',
  props: {
    sidebarList: Array,
    isNest: {
      type: Boolean,
      default: false
    }
  },
  components: {
    's-menu-item': MenuItem,
    's-submenu': Submenu,
    's-icon': Icon
  }
}
</script>
<style>
.el-menu-item i {
    color: #FFFFFF;
}
</style>
